<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AXUM.RS后台管理</title>

    <!-- Google Font: Source Sans Pro -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
    />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="/static/adminlte/plugins/fontawesome-free/css/all.min.css"
    />
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/adminlte/dist/css/adminlte.min.css" />
  </head>
  <body class="hold-transition login-page">
    <div class="login-box">
      <!-- /.login-logo -->
      <div class="card card-outline card-primary">
        <div class="card-header text-center">
          <a href="/" class="h1"><b>AXUM</b>.rs</a>
        </div>
        <div class="card-body">
          <p class="login-box-msg">AXUM.RS后台管理</p>

          <form action="/login" method="post" id="frmLogin">
            <input
              type="hidden"
              name="hcaptcha_response"
              id="hcaptcha_response"
            />
            <div class="input-group mb-3">
              <input
                type="text"
                class="form-control"
                placeholder="账号"
                name="username"
                autocomplete="off"
                required
              />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-user"></span>
                </div>
              </div>
            </div>
            <div class="input-group mb-3">
              <input
                type="password"
                class="form-control"
                placeholder="密码"
                name="password"
                autocomplete="off"
                required
              />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-lock"></span>
                </div>
              </div>
            </div>
            <div class="h-captcha" data-sitekey="{{ site_key }}"></div>
            <div class="row">
              <!-- /.col -->
              <div class="col-4 offset-8">
                <button type="submit" class="btn btn-primary btn-block">
                  登录
                </button>
              </div>
              <!-- /.col -->
            </div>
          </form>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.login-box -->

    <!-- jQuery -->
    <script src="/static/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/static/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/static/adminlte/dist/js/adminlte.min.js"></script>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <script>
      $(function () {
        $("#frmLogin").submit(function () {
          let response = $("[name=h-captcha-response]").val();
          if (!response) {
            alert("请完成人机验证");
            return false;
          }
          $("#hcaptcha_response").val(response);
        });
      });
    </script>
  </body>
</html>
